<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link href="..\css\1.css" rel="stylesheet" />
   <script>function myFunction(){    alert("购买成功");}</script>
</head>
<body>
    <!-- 导航栏所占普通流位置 -->
    <div id="navbarBox" style="min-height: 48px;">
        <!-- fixed定位后的导航栏 -->
        <div id="navbar">
            <!-- 导航栏容器 -->
            <div class="navbar-container">
                <div class="navbar-container-left">
                    <div class="logo">
                        <img src="..\img\1.png">
                    </div>
                   
                    <ul class="left-ul">
                        <li ><a >商城 </a></li>
                            <li >
                                <a href="https://www.bilibili.com/"> 主站 </a> 
                            </li>
                            
                        </ul>
                   
                </div>


                <div class="navbar-container-middle">
                    <div class="navbar-search-container">
                        <input type="text" autocomplete="off" id="search">
                        <button>
                            <i></i>
                        </button>
                    </div>
                </div>


                <div class="navbar-container-right">
                    <div class="navbar-btns-User">
                        <div class="userPhoto" onmouseover="over()" onmouseout="out()">
                            <!-- 小头像 -->
                            <a class="hasAvatar" href="https://account.bilibili.com"  >
                                <img src="..\img\4.png">
                            </a> 
                            <!-- 用户简介信息 暂时设置display:none-->
                            <div id="navbar-profile" class="navbar-plugin"  style="display: none; opacity: 1;" >
                                <div class="profile-user">
                                    <!-- 简介信息的头像 -->
                                    <a class="profile-avatar"
                                        href="https://account.bilibili.com">
                                        <img src="..\img\1.png"></a>       
                                    <p class="profile-nickName">大会员</p>
                                </div> 
                            </div>
                        </div>
                        <!-- 会员中心 -->
                        <div class="navbar-btn vip navbar-fl">
                            <img style="position: relative; vertical-align: middle; width: 24px; top: -1px; left: 0px;;display:inline-block" "="" src="..\img\6.png">
                            <a href="https://account.bilibili.com/account/home">订单中心 
                                
                            </a> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='shop'>
		<div class='shoping'>
			<div class="imgs">
				 <img src="..\img\7.png"> 
			</div>
			<div class='title'>
				<p class='name'>苏州·I COME ACG X 中国国际动漫节COSPLAY超级盛典江苏</p>
				<p class='pic'>35</p>
				<p>
					<button class='gocar' >加入购物车</button>
				</p>
			</div>
		</div>
    <div class="car">
		<table width="900" border="1" cellspacing="0" id="TB">
			
			<tr>
				<th width="40">
					<input type="checkbox" class="qx">
				</th>
				<th width="200">商品名字</th>
				<th width="150">图片</th>
				<th>价格</th>
				<th>数量</th>
				<th>总价</th>
				<th>操作</th>
			</tr>
		</table>
	</div>
	</div>
    <section class="contact-block" style="margin-top:300px;float:right;margin-right: 950px; ">
        <div class="info-title">
            <span class="title-text">联系人</span>
            <span class="title-tip">
                用于接收项目重要通知
            </span>
        </div>
        <div class="info-content">
          <div class="content-prop">
              <span class="input-prop prop-name">姓名</span>
              <div class="input-value-wrapper">
                  <input class="input-value" type="text" placeholder="">
              </div>
          </div> 
          <div class="content-prop" >
              <span class="input-prop prop-tel"></span>
              <div class="input-value-wrapper ">
              <div class="input-value" type="text" placeholder="请输入联系人手机号"></div>
            </div>
            <a><button  onclick="myFunction()"  type="button" onclick="alert('购买成功')" style="background-color:#f1f3f5;margin-top: -450px; margin-right:-510px;float:right;height:46px;border:none">立即购买</button></a>
          </div>
          <div class="tip"
          style="margin-top: 15px;">
            <li><b>传送门</b></li>
            <p>帮助中心
            高级弹幕 </p>
            <p> 活动专题页
                侵权申述 </p>
                <p>活动中心</p>
        </div>
        
          <div>
            <p><b>bilibili</b></p>
            <p > 关于我们&emsp;
                友情链接&emsp;
                哔哩哔哩周边 </p>
                <p> 官方认证&emsp;  
                    购买须知 &emsp; 
                    客服中心 </p>    
                <p>联系我们 &emsp;   加入我们</p>
                
          </div>
        
  </section>
    <script type="text/javascript">
		var obtn=document.getElementsByClassName('gocar')
		var otble=document.getElementById('TB')
		var imgs=document.getElementsByClassName('imgs')
		var oname=document.getElementsByClassName('name')
		var pic=document.getElementsByClassName('pic')
	for (var i=0;i<obtn.length;i++) {
		obtn[i].index=i;
		obtn[i].onclick=function(){
			// 当前 图片 名字 价格
			var onames=oname[this.index].innerHTML
			var opic=pic[this.index].innerHTML
			var oimg=imgs[this.index].innerHTML
			var otbody=otble.children[0]
			// 创建 tr
			var tr=document.createElement('tr');
			//在tr里面拼接代码
			tr.innerHTML="<th><input type='checkbox'/></th>"+
			'<th>'+onames+'</th>'+'<th>'+oimg+'</th>'
			+'<th>'+opic+'</th>'+'<th><button class="up">-</button><span class="number">1</span><button class="down">+</button></th>'
			+'<th class="dj">'+opic+'</th>'
			+'<th><span class="sc">删除</span>'
			//添加tr
			otbody.appendChild(tr)	
		//功能	
		// 获取tr
		var tr1=document.getElementsByTagName('tr')
		for (var i=0;i<tr1.length;i++) {
			tr1[i].index=i;
		tr1[i].onclick=function(e){
		var e=e||window.event;
		// target 返回点击目标  this 当前对象
		var el=e.target||e.srcElement;
	    //获取点击class
		var cls=el.className 
		var shuliag=this.getElementsByClassName('number')[0]
		var val=Number(shuliag.innerHTML)
		// switch 判断固定值
		switch(cls){
			case "down":
		    shuliag.innerHTML=val+1;
		    str(this)
		    break;
			case "up":
			if(val>1){
			shuliag.innerHTML=val-1;	
			}
			str(this)
			break;
			case "sc":
			var conf = confirm('确定删除此商品吗？');
			if(conf){
			this.parentNode.removeChild(this)	
			}
		
		  }
		}
	}
		function str(cc){
		var oa=cc.cells;
		var oa3=oa[3].innerHTML; 
		var shuliang=oa[4].getElementsByClassName('number')[0].innerHTML 
		oa[5].innerHTML=Number(oa3)*Number(shuliang)
		if(Number(shuliang)==1){
			alert("最后一件了")
		}
	}
		
		
	}
}	
	</script>
</body>